﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>index</title>
<style type="text/css">
        .box{width: 600px; height: 200px;background: #f5f5f5}
        .box1{width: 600px;height: 200px;background: #ccc;margin-top: 80px;}
        .hover-border{display: inline-block;position: absolute;z-index: 100}

        .left-right-border{height: 0;}

        .left-border{ left: 0px;}
        .right-border{ right: 0px;bottom: 0px;}
        .left-right-top-bottom-border{width: 0;}
        .left-top-border{right: 50%;top: 0px;}
        .left-bottom-border{left: 0px;bottom: 0px;}
        .right-top-border{right: 0px;top: 0px;}
        .right-bottom-border{left: 50%;bottom: 0px;}
    </style>
</head>
<body>
<div class="box"><img src="static/picture/a1.png"></div>
<div class="box1"><img src="static/picture/a2.png"></div>
<script src="static/js/jquery.min.js"></script>
<script type="text/javascript" src="static/js/jquery.nicehover.js"></script>
<script type="text/javascript">
    $(".box,.box1").niceHover({weight:1,color:"#530091"});
</script>
</body>
</html>